<template>
  <div>
    <div class="van-dropdown-menu">
      <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
        <div role="button" tabindex="0" class="van-dropdown-menu__item">
          <span class="van-dropdown-menu__title"
                :class="[ showSelectMultiple ? 'van-dropdown-menu__title--active van-dropdown-menu__title--down' : '' ]"
                @click="selectActive()">
            <div class="van-ellipsis">{{ selectName }}</div>
          </span>
          <div v-if="showSelectMultiple" class="btn_left">
            <span v-if="!all" @click="toggleAll()">全选</span>
            <span v-if="all" @click="toggleFalseAll()">取消全选</span>
          </div>
          <div v-if="showSelectMultiple" class="btn_true" @click="submitSelect()">确定</div>
        </div>
      </div>
    </div>
    <div v-if="showSelectMultiple" class="van-dropdown-item van-dropdown-item--down" style="top: 40.9531px;">
      <div class="van-overlay" style="z-index: 2005; position: absolute; animation-duration: 0.2s;"/>
      <div ref="content" class="van-popup van-popup--top van-dropdown-item__content"
           style="transition-duration: 0.2s; z-index: 2006; position: relative; ">

        <van-checkbox-group v-model="checked" res="checkboxGroup" @change="selectDataOptsChange">
          <div v-for="(item,index) in selectDataOpts" :key="item.value" role="button" :tabindex="index"
               class="van-cell van-cell--clickable van-dropdown-item__option">
            <div class="van-cell__title">
              <span>
                <van-checkbox :name="item.value" checked-color="#A9B910">{{ item.text }}</van-checkbox></span>
            </div>
          </div>
        </van-checkbox-group>

      </div>

    </div>
  </div>
</template>
<script>
import {Checkbox, CheckboxGroup, DropdownMenu, DropdownItem} from 'vant'

export default {
  name: 'CopyCode',
  components: {
    VanCheckbox: Checkbox,
    VanCheckboxGroup: CheckboxGroup,
    // eslint-disable-next-line
    VanDropdownMenu: DropdownMenu,
    // eslint-disable-next-line
    VanDropdownItem: DropdownItem
  },
  props: {
    selectName: {
      type: String,
      default: '全部'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    otherName: {
      type: String,
      default: '会议时间'
    },
    checkedList: {
      type: Array,
      default: function () {
        return []
      }
    },
    selectDataOpts: {
      type: Array,
      default: function () {
        return []
      }
    }
    // showSelectMultiple: {
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      showSelectMultiple: false,
      checked: [],
      all: false
    }
  },
  mounted() {
    this.checked = this.checkedList
  },
  methods: {
    selectActive() {
      if (this.disabled) {
        return
      }
      this.showSelectMultiple = !this.showSelectMultiple
    },
    toggleAll() {
      const data = []
      for (let i = 0; i < this.selectDataOpts.length; i++) {
        data.push(this.selectDataOpts[i].value)
      }
      this.all = true
      this.checked = data
    },
    toggleFalseAll() {
      this.all = false
      this.checked = []
    },
    submitSelect() {
      this.showSelectMultiple = false
      this.selectNameData()
    },
    cancelSelect() {
      this.showSelectMultiple = false
    },
    selectDataOptsChange(data) {
      this.selectNameData()
    },
    selectNameData() {
      if (!this.checked.length || this.selectDataOpts.length === this.checked.length) {
        this.$emit('selectMutiple', {checked: this.checked, name: '全部' + this.otherName})
      } else {
        this.$emit('selectMutiple', {checked: this.checked, name: '已选中（' + this.checked.length + ')' + this.otherName})
      }
    },
    onCopy() {
    },
    onError() {
    }

  }
}
</script>
<style lang="less" scoped>
.van-checkbox-group {
  margin-top: 16% !important;
}

///deep/ .van-icon
/////deep/ .van-icon-success
//{
//  background-color: #1989fa !important;
//  border-color: #1989fa !important;
//}

//.van-icon .van-icon-success{
//  background-color: #1989fa !important;
//  border-color: #1989fa !important;
//}
//.van-icon .van-icon-success .van-checkbox__icon .van-checkbox__icon--round .van-checkbox__icon--checked{
//  background-color: #1989fa !important;
//  border-color: #1989fa !important;
//}
.copy {
  font-size: 14px;
}

.blank {
  position: relative;
  width: 100%;
  height: 60px;
}

.btn_true {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  background-color: #1989fa;
  color: #fff;
  position: absolute;
  text-align: center;
  line-height: 30px;
  right: 10px;
  font-size: 14px;
  top: 10px;
}

.btn_left {
  width: 60px;
  height: 30px;
  position: absolute;
  text-align: center;
  line-height: 30px;
  left: 10px;
  font-size: 14px;
  top: 10px;
}

.block_content {
  width: 100%;
}

.flex_bottom {
  position: absolute;
  bottom: -10px;
  left: 0;
}
</style>
